<template>
	<view style="background: #fff;">
		<view class="content">
			<view>崔金坤老师的精彩人生</view>
			<view>已有 <text>554564</text>人次浏览了此相册</view>
		</view>
		<!-- 需要吸顶的元素 -->
		<view class="sticky" :style="stickyStyle">{{ text }}</view>
		<view class="content">
			<template>
				<CustomWaterfallsFlow :value="list">
					<template v-slot:default="item">
						<view class="item">
							<view class="title">{{item.title}}</view>
							<view class="desc">{{item.desc}}</view>
						</view>
					</template>
				</CustomWaterfallsFlow>
			</template>
		</view>
		<!-- 占位元素 -->
		<view class="placeholder" v-show="showPlaceholder"></view>
	</view>
</template>

<script>
	import CustomWaterfallsFlow from '../../components/custom-waterfalls-flow/custom-waterfalls-flow'
	export default {
		components:{
			CustomWaterfallsFlow
		},
		data() {
			return {
				text: '滚动吸顶效果',
				stickyStyle: '', // 吸顶元素的样式
				showPlaceholder: false, // 是否显示占位元素
				list: [{
						image: 'https://via.placeholder.com/200x500.png/ff0000',
						title: '我是标题1',
						desc: '描述描述描述描述描述描述描述描述1'
					},
					{
						image: 'https://via.placeholder.com/200x200.png/2878ff',
						title: '我是标题2',
						desc: '描述描述描述描述描述描述描述描述2'
					},
					{
						image: 'https://via.placeholder.com/200x80.png/2878ff',
						title: '我是标题3',
						desc: '描述描述描述描述描述描述描述描述2'
					},
					{
						image: 'https://via.placeholder.com/200x60.png/2878ff',
						title: '我是标题4',
						desc: '描述描述描述描述描述描述描述描述2'
					},
					{
						image: 'https://via.placeholder.com/200x300.png/2878ff',
						title: '我是标题5',
						desc: '描述描述描述描述描述描述描述描述2'
					},
					{
						image: 'https://via.placeholder.com/200x100.png/2878ff',
						title: '我是标题6',
						desc: '描述描述描述描述描述描述描述描述2'
					},
					{
						image: 'https://via.placeholder.com/200x65.png/2878ff',
						title: '我是标题7',
						desc: '描述描述描述描述描述描述描述描述2'
					},
					{
						image: 'https://via.placeholder.com/200x200.png/2878ff',
						title: '我是标题8',
						desc: '描述描述描述描述描述描述描述描述2'
					},
					{
						image: 'https://via.placeholder.com/200x200.png/2878ff',
						title: '我是标题9',
						desc: '描述描述描述描述描述描述描述描述2'
					}
				]
			}
		},
		onUnload() {
			this.stickyStyle = ''
		},
		onPageScroll(e) {
			// 监听页面滚动事件
			if (e.scrollTop > 1050) {
				this.stickyStyle =
					'position: fixed; top: 44px; left: 0; width: 100%; z-index: 999; background: rgba(255,255,255, 0.8);'
				this.showPlaceholder = true
			} else {
			
				this.stickyStyle = ''
				this.showPlaceholder = false
			}
		}
	}
</script>

<style lang="scss">
	.sticky {
		/* 设置吸顶元素的样式 */
		height: 100px;
		line-height: 100px;
		text-align: center;
		// background-color: #f5f7fa;
		color: #333;
		background: #fff;
	}

	.content {
		/* 设置内容容器的样式 */
		/* ... */
	}

	.placeholder {
		/* 设置占位元素的样式 */
		height: 100px;
	}
</style>